<template>
  <div class="user">
    <Header>
      <a
        href="javascript:;"
        slot="logo"
        @click="gobackClickHandle"
        class="goback"
      >
        <i class="icon-arrow-left-bold"></i>
      </a>
      <span slot="title" class="user_header_title">{{
        $t('lang["' + $route.meta.title + '"]')
      }}</span>
      <a
        href="javascript:;"
        slot="rightMenu"
        @click="shareClickHandle"
        class="user_share"
        :class="isShow ? 'on' : ''"
      >
        <i class="icon-share_light"></i>
      </a>
    </Header>
    <div class="user_main">
      <UserPanel></UserPanel>
    </div>
    <Footer></Footer>
    <van-share-sheet
      v-model="isShow"
      :options="options"
      :title="this.$t('lang.分享给好友')"
    />
  </div>
</template>
<script>
export default {
  name: "User",
  components: {
    Header: () =>
      import(/* webpackChunkName: "header" */ "../components/header"),
    Footer: () =>
      import(/* webpackChunkName: "footer" */ "../components/footer"),
    FooterNav: () =>
      import(/* webpackChunkName: "footerNav" */ "../components/footerNav"),
    UserPanel: () =>
      import(/* webpackChunkName: "userMain" */ "../components/user/userMain"),
  },
  data() {
    return {
      isShow: false,
      options: [
        { name: this.$t("lang.微信"), icon: "wechat" },
        { name: this.$t("lang.微博"), icon: "weibo" },
        { name: this.$t("lang.复制链接"), icon: "link" },
        { name: this.$t("lang.分享海报"), icon: "poster" },
        { name: this.$t("lang.二维码"), icon: "qrcode" },
      ],
    };
  },
  methods: {
    gobackClickHandle(e) {
      this.$router.go(-1);
    },
    shareClickHandle(e) {
      this.isShow = true;
    },
    onSelect(option, index) {},
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.user {
  padding: 0;
  margin: 0;
  .user_header_title {
    line-height: 45 / @base;
  }
  .user_main {
    margin: 45 / @base 0 0;
  }
  .header {
    .header_left {
      a {
        &.goback {
          width: 24 / @base;
          height: 24 / @base;
          display: block;
          margin: 10 / @base 0 10 / @base 10 / @base;
          i {
            font-size: 24 / @base;
          }
        }
      }
    }
    .header_right {
      a {
        &.user_share {
          &.on {
            color: brown;
          }
          height: 24 / @base;
          display: block;
          padding: 10 / @base 15 / @base 10 / @base 0;
          text-align: right;
          i {
            font-size: 24 / @base;
          }
        }
      }
    }
  }
}
</style>
